<template>
  <div :class="prefixCls">
    <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay notice-top_tips`">
      <Badge
        :count="count"
        :numberStyle="{
          top: '16px',
        }"
      >
        <BellOutlined style="font-size: 22px" />
      </Badge>
      <template #content>
        <NoticeItem
          :list="aTipsList"
          :onTitleClick="onNoticeClick"
          @update:clear-msg="fnClearMsg"
          :pageSize="5"
        />
      </template>
    </Popover>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
  import { Popover, Badge } from 'ant-design-vue';
  import { BellOutlined } from '@ant-design/icons-vue';
  import { useDesign } from '@/hooks/web/useDesign';
  import NoticeItem from './NoticeItem.vue';
  import { apiTipsRead } from '@/api/system/system';
  import { INotification } from '@/api/system/model/systemModel';
  import { useGo } from '@/hooks/web/usePage';
  import { universalEncryption } from '@/utils/cipher';
  import { useMessage } from '@/hooks/web/useMessage';

  const go = useGo();
  const { createMessage } = useMessage();
  const { prefixCls } = useDesign('header-notify');

  const aTipsList = ref<INotification[]>([]);
  const count = computed(() => {
    return aTipsList.value.filter((item) => item.state_id == 1).length;
  });

  onMounted(() => {});

  onBeforeUnmount(() => {});

  async function onNoticeClick(record: INotification) {
    await apiTipsRead({ tips_id: record.id });
    record.state_id = 2;
    record.state_name = '已读';
    const params = universalEncryption.encrypt(
      JSON.stringify({
        parameter_id: record.related_order_id,
        Req_type_id: 3,
      }),
    );
    go('/strategy/contrast?params=' + params);
  }

  async function fnClearMsg() {
    await apiTipsRead({ tips_id: 0 });
    aTipsList.value = [];
    createMessage.success('通知清空完成');
  }
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-header-notify';

  .@{prefix-cls} {
    padding-bottom: 1px;

    &__overlay {
      max-width: 560px;
    }

    .ant-tabs-content {
      width: 500px;
    }

    .ant-badge {
      display: flex;
      align-items: center;
      font-size: 18px;

      .ant-badge-multiple-words {
        padding: 0 4px;
      }

      svg {
        width: 0.9em;
      }
    }

    sup.ant-scroll-number.ant-badge-count {
      top: 17px;
    }
  }

  .notice-top_tips {
    top: 36px !important;

    .ant-popover-arrow {
      //left:69%
    }
  }
</style>
